﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>触摸板</title>
    <link href="/Content/css/layout.css" rel="stylesheet" />
    <link href="/Content/css/news.css" rel="stylesheet" />

    <link href="/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.12.1.min.js"></script>
    <script src="/Scripts/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="/Scripts/arttemplate.js"></script>
    <style type="text/css">
        .c-round {
            height: 100px;
            width: 100px;
            background-color: #2D3237;
            line-height: 100px;
            -moz-border-radius: 10px; /* Gecko browsers */
            -webkit-border-radius: 10px; /* Webkit browsers */
            border-radius: 10px; /* W3C syntax */
        }

        .corey-d {
            width: 70px;
            height: 70px;
            margin: 10px 24px;
            float: left;
        }

        .corey-s {
            float: left;
            height: 20px;
            color: #fff;
            line-height: 20px;
            margin: 0px 9.5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <div style="margin-top:13px; height:80px; z-index:999;" class="metro metro-normal">
                <h2 style="text-align:center; color:#fff; font-weight:bold; ">KATCON NEWS</h2>
            </div>
            <div style="margin-top:-80px; height:287px;" class="metro metro-normal news" id="news1"></div>
            <div class="metro metro-info sm text-center">
                <ul class="list-inline locals">
                    <li onclick="location.href = 'Map3.html';" style="width:220px;">
                        <div class="c-round" style="margin:0px auto;">
                            <img src="/Content/images/LocationPin.png" style="width:45px; height:60px;" />
                        </div>
                        <div class="text" style="color:#fff;font-size:8px;">GLOBAL AUTOMOTIVE<br />INDUSTRY SITE MAP</div>
                    </li>
                    <li style="width: 1px; height: 140px;">
                        <div style="border:1px solid #000; border-color:rgb(78,83,90); width:1px; height:75%;"></div>
                    </li>
                    <li onclick="location.href = 'Map4.html';" style="width:220px;">
                        <div class="c-round" style="margin:0px auto;">
                            <img src="/Content/images/LocationPin.png" style="width:45px; height:60px;" />
                        </div>
                        <div class="text" style="color:#fff;font-size:8px;">CHINA AUTO ENGINE<br />INDUSTRY SITE MAP</div>
                    </li>
                </ul>
            </div>
            <div style="color:#fff" class="metro metro-alert xs text-center" id="corey-d">
                <div class="icon camera"></div>&nbsp;&nbsp;
                <span class="h2">TECH CENTER</span>
            </div>
            <!--<div style="color:#fff;" class="metro metro-alert xs text-center">
                <div class="icon camera corey-d"></div>
                <div class="icon camera corey-d"></div>
                <div class="icon camera corey-d"></div>
                <div class="icon camera corey-d"></div>
                <label class="corey-s">TECH CENTER</label>
                <label class="corey-s">TECH CENTER</label>
                <label class="corey-s">TECH CENTER</label>
                <label class="corey-s">TECH CENTER</label>
                <div style="clear:both;"></div>
            </div>-->
        </div>
        <div class="center">
            <div style="margin-top:13px; height:345px;" class="metro metro-none">
                <video controls="controls" loop="loop">
                    <source src="/Upload/Video/gk2016n.mp4" />
                </video>
            </div>
            <div style="color:#fff" class="metro metro-warning sm">
                <h1>KATCON INTRODUCTION</h1>
                <div class="ki" style="background-image: url('/Content/images/ki1.png');" onclick="location.href = 'Map1.html';"></div>
                <div class="ki" style="background-image: url('/Content/images/ki2.png');" onclick="location.href = 'Map2.html';"></div>
                <div class="ki" style="background-image: url('/Content/images/ki3.png');" onclick="location.href = 'Customer.html';"></div>
                <div class="ki" style="background-image: url('/Content/images/ki4.png');" onclick="$('#myModal2').modal();"></div>
                <div style="clear:both;"></div>
            </div>
            <div style="" class="metro metro-none xs logo-box">
                <div>
                    <img class="logo" src="/Content/images/logo.png" />
                </div>
                <img class="icon1" src="/Content/images/icon1.png" onclick="cw()" />
            </div>
        </div>
        <div class="right">
            <div style="margin-top:13px" class="metro metro-danger lg">
                <div style="width:100%; height:580px;">
                    <div>
                        <div>
                            <div style="font-size:90px; font-family:Arial; font-weight:bold; text-align:center; margin-top:40px;">
                                <span style="color:#fff;" id="hours"></span>
                                <span style="color:#808080;">:</span>
                                <span style="color:#fff;" id="minutes"></span>
                            </div>
                            <div style="text-align:center; color:#808080; font-size:28px; margin-top:-15px;" id="time"></div>
                            <div style="text-align:center; height:100px; line-height:100px; color:#808080; margin-top:20px;" id="weather">
                                <span style="font-size:50px; padding:0px 15px;" id="current"></span>
                                <span style="font-size:28px;" id="interval"></span>
                            </div>
                            <div style="width:100%; height:290px; margin-top:40px; background-color:rgb(46,50,56)">
                                <ul id="weather-5day"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="color: #fff; height: 132px; font-weight: bold;" class="metro metro-success text-center">
                <div style="font-size:20px; padding:10px 0px;">PRODUCT PORTFOLIO</div>
                <div style="font-size:40px;">
                    <span style="margin-left:13px;" onclick="location.href = 'Product.html'">HOT END</span>
                    <span style="border:1px solid #fff; margin-right:12px;"></span>
                    <span onclick="location.href = 'Product2.html'">COLD END</span>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 1000px; height:600px; margin-top: 10%; margin-left:23%; border: 3px solid #171717; background:rgba(255,255,255,.8) ">
                    <div class="modal-body">
                        <div class="news-html">
                            <div class="n-header" style="width:100%; height:50px;">
                                <span id="n-title" style="font-size:37px; font-weight:bold; margin-left:20px;">KATCON NEWS</span>
                                <img style="float:right;" src="/Content/images/close.png" onclick="$('#myModal').modal('hide');" />
                            </div>
                            <div class="n-content" style="height:500px; margin-top:20px; padding:0px 50px;">
                                <div class="cover" id="cover-file">

                                </div>
                                <iframe id="news-html" src="News.html" style="width:100%; height:250px; margin-top:20px;" frameborder="1"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 1000px; height: 500px; margin-top: 10%; margin-left: 23%; border: 3px solid #171717; background: rgba(255,255,255,.8);">
                    <div class="modal-body">
                        <div class="news-html">
                            <div class="n-header" style="width:100%; height:50px;">
                                <img style="float:right;" src="/Content/images/close.png" id="videoClose" />
                            </div>
                            <div class="n-content" style="height:500px; margin-top:20px;">
                                <div class="metro metro-none">
                                    <video id="video2" controls="controls">
                                        <source src="/Upload/Video/Katcon_Kiit2013.mp4" />
                                    </video>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 1555px; height:850px; margin-top: 110px; margin-left:180px; border: 3px solid #171717; background:rgba(255,255,255,.8) ">
                    <div class="modal-body">
                        <div class="news-html">
                            <div class="n-header" style="width:100%; height:50px;">
                                <span id="n-title" style="font-size:37px; font-weight:bold; margin-left:20px;">KATCON NEWS</span>
                                <img style="float:right;" src="/Content/images/close.png" onclick="$('#myModal3').modal('hide');" />
                            </div>
                            <div class="n-content" style="width: 100%; height: 700px; margin-top: 20px; ">
                                <iframe id="tech-html" style=" width:100%; height:100%; margin-top: 20px;" frameborder="0"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script id="tpl-row1" type="textml">
        {{each ApiParamObj as value i}}
        <ul>
            <li>
                <a href="javascript:void(0)" style="color:#fff;">{{ value.Title }}</a>
                <input type="hidden" value="{{ value.ID }}" data-img="{{ value.CoverURL }}" data-video="{{ value.VideoURL }}" />
            </li>
        </ul>
        {{/each}}
    </script>

    <script type="text/javascript">
        var docElm = document.documentElement;

        function fs() {
            //W3C

            if (docElm.requestFullscreen) {

                docElm.requestFullscreen();

            }

                //FireFox

            else if (docElm.mozRequestFullScreen) {

                docElm.mozRequestFullScreen();

            }

                //Chrome等

            else if (docElm.webkitRequestFullScreen) {

                docElm.webkitRequestFullScreen();

            }

                //IE11

            else if (elem.msRequestFullscreen) {

                elem.msRequestFullscreen();

            }
        }

        function exitFs() {


            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }
        document.addEventListener("fullscreenchange", function () {
            fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
        }, false);

        document.addEventListener("mozfullscreenchange", function () {
            fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
        }, false);

        document.addEventListener("webkitfullscreenchange", function () {
            fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
        }, false);
        document.addEventListener("msfullscreenchange", function () {
            fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
        }, false);






        function rfTime() {
            $('#hours').html(newDate.getHours());

            $('#minutes').html(newDate.getMinutes().toString().length == 1 ? '0' + newDate.getMinutes() : newDate.getMinutes());
            $('#time').html(Months[newDate.getMonth()] + '    ' + (newDate.getDate()) + ',' + newDate.getFullYear() + '   ' + weeks[newDate.getDay()]);

            setTimeout("rfTime();", 30000);


        }









        var reg = /^[0-9]/;

        var Months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Eleven', 'December'];
        var weeks = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
        var newDate = new Date();

        $('#hours').html(newDate.getHours());

        $('#minutes').html(newDate.getMinutes().toString().length == 1 ? '0' + newDate.getMinutes() : newDate.getMinutes());
        $('#time').html(Months[newDate.getMonth()] + '    ' + (newDate.getDate()) + ',' + newDate.getFullYear() + '   ' + weeks[newDate.getDay()]);


        $.ajax({
            url: 'http://apis.baidu.com/apistore/weatherservice/recentweathers?cityname=上海',
            headers: {
                apikey: "fa5d5e711e54e771b345d31cad442aab"
            },
            type: 'get',
            dataType: 'json',
            success: function (data) {

                var weathers = {
                    yintian: '5px -10px'
                };

                var retData = data.retData;
                var weather = '<span class="yintian" style="background-image: url(/Content/images/weather.png); background-position: ' + weathers.yintian + '; padding: 17px 50px 15px 0px;"></span>';
                $('#weather').prepend(weather);
                $('#current').html(retData.today.curTemp);
                $('#interval').html(retData.today.hightemp + '/' + retData.today.lowtemp);

                for (var i = 1; i < retData.history.length; i++) {
                    var history = retData.history[i];
                    var sss = '<li style="text-align:center; margin:0px auto; margin-bottom:0px;width:80%; height:48px; line-height:45px; color:#808080; border-bottom:1px solid #808080;">' +
                                        '<span style="padding-right:15px;">' + Months[newDate.getMonth()] + ' ' + (newDate.getDate() + i) + '</span>' +
                                        '<span class="yintian" style="background-image: url(/Content/images/weather.png); background-position: 5px -10px; padding: 17px 50px 15px 0px;"></span>' +
                                        '<span style="padding-left:15px;">' + history.hightemp + ' / ' + history.lowtemp + '</span>' + '</li>';
                    $('#weather-5day').append(sss);
                }

            }
        });

        $.ajax({
            url: '/api/CommonApi?API=Corey_GetNewsByColumnID',
            type: 'get',
            data: { ColumnID: '705BB527-E2D3-4730-96DD-6013026E7B54' },
            dataType: 'json',
            success: function (data) {
                if (data.Success) {
                    if (data.ApiParamObj.length > 0) {
                        $('#news1').html(template('tpl-row1', data));
                        $('#news1').find('a').click(function () {
                            var input = $(this).next();
                            var coverFile = '<img  src="' + input.attr('data-img') + '" style="height:200px; width:100%; " />';
                            if (input.attr('data-video') != '') {
                                coverFile = '<video controls="controls" style="height:200px; width:100%; "><source src="' + input.attr('data-video') + '" type="video/mp4" /></video>';
                            }
                            if (input.attr('data-img') == '' && input.attr('data-video') == '') {
                                coverFile = '';
                                $('#news-html').css({ height: 500, "margin-top": -10 });
                            }
                            $('#cover-file').html(coverFile);
                            $('#news-html').attr("src", "News.html?NewsID=" + $(this).next().val());
                            $('#myModal').modal('show');
                        });
                    }
                }
            }
        });

        $('#videoClose').click(function () {
            $('#myModal2').modal('hide');
            $('#video2').trigger('pause');
        });

        function cw() {
            location.href = "/Home/Close";

            window.open('', '_self', '');
            window.close();
        }

        function techModal(src) {
            $('#tech-html').attr('src', src);
            $('#myModal3').modal('show');
        }


        $('#corey-d').click(function () {
            $.ajax({
                url: '/TC/Index',
                type: 'get',
                data: {},
                dataType: 'json',
                success: function (data) {

                }
            });
        });

    </script>

</body>
</html>